<template>
    <div class="ranking-page">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="省内综合指数" name="省内综合指数">
                <template slot="content"></template>
            </el-tab-pane>
            <el-tab-pane label="区域综合指数" name="区域综合指数">
                <template slot="content"></template>
            </el-tab-pane>
        </el-tabs>
        <slot name="content">
            <div class="main-site" v-for="(item, index) in dataList" :key="index"
                v-show="item.key == '中山市' || (activeName == '区域综合指数' && item.key == '火炬开发区')">
                <dd><span class="circle">{{ index + 1 }}</span><span>{{ item.key }}</span></dd>
                <dd>{{ item.value }}</dd>
            </div>
            <div class="main-content">
                <div class="header">
                    <dd><span class="pm">排名</span><span>位置</span></dd>
                    <dd><span>{{ pmName }}</span><span class="circle">?</span></dd>
                </div>
                <div class="item-box">
                    <div class="item" v-for="(item, index) in dataList" :key="index">
                        <dd><span class="circle">{{ index + 1 }}</span><span>{{ item.key }}</span></dd>
                        <dd>{{ item.value }} <span style="visibility:hidden;">占位</span></dd>
                    </div>
                </div>
            </div>
        </slot>
    </div>
</template>
<script>
let url
export default {
    data() {
        return {
            pmName: "综合指数",
            activeName: '省内综合指数',
            dataList: []
        };
    },
    methods: {
        getData(data, params) {
            // 获取排名参数
            if (params.orderBy == "total") {
                this.pmName = "综合指数"
                params.orderBy = "totalIndex"
            } else if (params.orderBy == "pm25") {
                this.pmName = "PM2.5"
            } else {
                this.pmName = params.orderBy.toUpperCase()
            }
            // 获取排名
            this.dataList = []
            data.forEach(item => {
                this.dataList.push({ key: item.name, value: item[params.orderBy] })
            });
        },
        handleClick(tab, event) {
            url = tab.name == "省内综合指数" ? "/ranking/getInProvinceRank" : "/ranking/getInAreaRank"
            this.$emit("getRankingUrl", url)
        }
    }
};
</script>
<style lang="less">
.ranking-page {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 1px 5px 2px rgba(29, 29, 29, 0.25);

    .el-tabs__item {
        width: 8vw;
        height: 60px;
        text-align: center;
        line-height: 60px;
        font-size: 18px;
        padding: 0;
    }

    .main-site {
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        font-size: 26px;
        font-weight: 700;
        margin: 20px 0;
        color: #4ca2f7;
        background-color: #dde3e4;

        .circle {
            display: inline-block;
            width: 40px;
            height: 40px;
            margin-right: 10px;
            text-align: center;
            line-height: 40px;
            border-radius: 50%;
            border: 2px solid #4ca2f7;
        }
    }

    .main-content {

        .header {
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            font-size: 18px;
            font-weight: 700;
            border-bottom: 2px solid #d1d1d1;
            color: #717376;

            .pm {
                margin-right: 10px;
            }

            .circle {
                cursor: pointer;
                display: inline-block;
                width: 20px;
                height: 20px;
                margin-left: 10px;
                text-align: center;
                line-height: 20px;
                border-radius: 50%;
                color: #dde3e4;
                border: 2px solid #dde3e4;
            }
        }

        .item-box {
            width: 100%;
            height: 65vh;
            overflow: auto;

            .item {
                height: 40px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 10px;
                margin: 15px 0;
                font-size: 18px;
                font-weight: 700;
                color: #000;

                .circle {
                    cursor: pointer;
                    display: inline-block;
                    width: 30px;
                    height: 30px;
                    margin-right: 10px;
                    text-align: center;
                    line-height: 30px;
                    border-radius: 50%;
                    color: #fff;
                    background-color: #314659;
                }
            }
        }

    }
}
</style>